<template>
  <div class="box">
      <div class="pinmi">
           <div class="haverd">
               <h3 class="h">
                   <div>
                       <span class="iconfont icon-zuoyou1" @click="$router.go(-1)"></span> &nbsp;<span>评论 <span>{{pingcomm.comments.length}}</span></span>
                   </div>
                   <span class="iconfont te icon-24gl-plusCircle"></span>
               </h3>
               <div class="toyou">
                   <div class="img">
                       <img :src="getsong.songs[0].al.picUrl" alt="">
                   </div>
                   <div class="text" v-if="getsong.songs">
                       <h3><div><span>{{getsong.songs[0].name}}</span>-<span>{{getsong.songs[0].ar[0].name}}</span></div><div class="re">
                        <span class="iconfont icon-yunshujukuMemcache"></span>云圈</div></h3>
                   </div>
               </div>
           </div>
           <div class="mianbot">
              <ul v-if="pingcomm.comments">
                <li v-for="(item) in pingcomm.comments" :Key="item.commentId">
                    <div class="myugna" >
                        <div class="topyu" >
                            <!-- v-for="(le) in item.user" :key="le.id" user  v-if="item.user"-->
                            <div class="img">
                                 <van-image
                                lazy-load
                                :src="item.user.avatarUrl"
                                />
                                <!-- <img :src="item.user.avatarUrl" alt=""> -->
                            </div>
                            <div class="nameto">
                                <div class="nad">
                                    <h3>{{item.user.nickname}}<span></span></h3>
                                    <p>{{item.timeStr}}</p>
                                </div>
                                <div class="dian">
                                   <!-- <span>123</span>  -->
                                   <!-- <span  :class="['iconfont','icon-icon',{'con': danidtt}]"></span> -->
                                   <span  @click="dianzhan(item.commentId,item.liked)" :class="['iconfont','icon-icon',{'con': item.liked == true }]"></span>
                                </div>
                            </div>
                        </div>
                        <div class="botom">
                           <p>
                             {{item.content}}
                           </p>
                        </div>
                    </div>
                </li>
                 <!-- <li>
                    <div class="myugna">
                        <div class="topyu">
                            <div class="img">
                                <img src="http://p1.music.126.net/1UV7jKj6i3ob1WUCsYZmNw==/109951164552974748.jpg" alt="">
                            </div>
                            <div class="nameto">
                                <div class="nad">
                                    <h3>陈壹仟<span></span></h3>
                                    <p>11-2</p>
                                </div>
                                <div class="dian">
                                   <span>123</span> <span class="iconfont icon-icon"></span>
                                </div>
                            </div>
                        </div>
                        <div class="botom">
                           <p>
                             一些零星的碎片1321414141
                           </p>
                        </div>
                    </div>
                </li> -->
              </ul>
          </div>
          <div class="inputbout">
              <van-field
                    v-model="value"
                    center
                    clearable
                    >
                    <template #button>
                        <van-button size="small" type="primary" @click="tuijia" >发表评论</van-button>
                    </template>
              </van-field>
          </div>
      </div>
  </div>
</template>

<script>

import {getcommusic,getsongsde,getpingcom,getdianzhan} from "../../api/pinglun"
import { Toast } from 'vant';
export default {
        data(){
            return{
                value:"",
                lisiid:null,//歌曲id
                pingcomm:{},//评论对象
                getsong:{},
                danidtt:false,
                // num:null,
            }
        },
        methods:{

            //cid : 评论 id  t : 是否点赞 , 1 为点赞 ,0 为取消点赞  type:0
            dianzhan(id,liked){//点赞
                console.log(id)
                console.log(this.lisiid)
                let pingid =id
                 Toast("点赞成功");
                if(liked==false){
                    getdianzhan({
                        id:this.lisiid,
                        cid:pingid,
                        t:1,
                        type:0,
                    }).then(data=>{
                        console.log(data)
                    })
                    
                }else{
                     getdianzhan({
                        id:this.lisiid,
                        cid:pingid,
                        t:0,
                        type:0,
                        
                    }).then(data=>{
                        console.log(data)
                    })
                }
                    
            },
            tuijia(){//评论发起
                //comments
                console.log(this.value)
                this.get();
                this.getcomping();
                this.value=""
            },

            getcomping(){
                //获取评论
                  getcommusic({id:this.lisiid}).then(data=>{
                    console.log("评论",data);
                    this.pingcomm = data
                })
            },
            getlistsongr(){
                getsongsde({ids:this.lisiid}).then(data=>{
                    this.getsong = data;
                    console.log("歌曲详情",data);
                })
                this.getcomping()
            },
            get(){
                getpingcom({
                    t:1,
                    type:0,
                    id:this.lisiid,
                    content:this.value
                }).then(data=>{
                    console.log(data)
                })
            }
        },
        created(){
            console.log(this.$route.params.obj);
            this.lisiid = this.$route.params.obj;
            this.getlistsongr();
        },
        Mounted(){
            this.getcomping()
        }
}
</script>

<style lang="less">

.box{
    width: 100%;
    height: 100%;
     left: 0;
    top: 0;
    
}


.pinmi{
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #fff;
     overflow-y: scroll;
    padding: 10px;
    z-index: 10001;
    box-sizing: border-box;
     .haverd{
        width: 100%;
        height: 100px;
        margin-bottom: 10px;
        h3.h{
            position: fixed;
            top: 0px;
            left: 0px;
            padding-left: 10px;
            padding-right: 10px;
            z-index: 100;
            box-sizing: border-box;
            width: 100%;
            background-color: rgb(238, 240, 238);
            height: 40px;
            font-size: 18px;
            display: flex;
            justify-content: space-between;
            div{
                width: 80%;
                height: 100%;
                line-height: 40px;
            }
            span.te{
                width: 15%;
                height: 100%;
                display: block;
                font-size: 18px;
                text-align: center;
                line-height: 40px;
            }
        }
        .toyou{
            width: 100%;
            margin-top: 40px;
            height: 60px;
            display: flex;
            // justify-content: space-between;
            .img{
                width: 20%;
                height: 100%;
                // border-radius: 50%;
                overflow: hidden;
                img{
                    margin: auto;
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                }

            }
            .text{
                width: 80%;
                height: 100%;
                padding: 10px;
                box-sizing: border-box;
                h3{
                    margin-top: 6px;
                    // margin-top: 20px;
                    width: 100%;
                    height: 30px;
                    font-size: 14px;
                    font-size: 400;
                    display: flex;
                    justify-content: space-between;
                    div{
                        font-size: 14px;
                        line-height: 30px;
                        &.re{
                            // position: absolute;
                            // right: 10px;
                            width: 60px;
                            text-align: center;
                            padding: 2px;
                            height: 30px;
                            box-sizing: border-box;
                            border-radius: 20px;
                            background: #ecf3f5;
                        }
                       
                    }
                }
            }
        }
    }
    .mianbot{
        width: 100%;
        
        box-sizing: border-box;
        ul{
            
            height: 100%;
            width: 100%;
            li{
                width: 100%;
                // height: 160px;
                margin-top: 10px;
                border-radius: 10px;
                padding: 10px;
                box-sizing: border-box;
                // background-color: #fafafa;
                .myugna{
                    width: 100%;
                    // height: 160px;
                    .topyu{
                        width: 100%;
                        height:60px;
                        display: flex;
                        .img{
                            width: 20%;
                            height: 100%;
                            img{
                                margin: auto;
                                width: 50px;
                                height: 50px;
                                border-radius: 50%;
                            }
                        }
                        .nameto{
                            width: 80%;
                            height: 100%;
                            display: flex;
                            .nad{
                                width: 80%;
                                height: 100%;
                                font-size: 14px;
                                 h3{
                                    width: 100%;
                                    font-weight: 400;
                                    height: 24px;
                                    overflow: hidden;
                                }
                                p{
                                    font-size: 10px;
                                }
                            }
                            .dian{
                                width: 20%;
                                height: 100%;
                                position: relative;
                                span{
                                    font-size: 24px;
                                    position: absolute;
                                    right: 10px;
                                    &.con{
                                        color: red;
                                    }
                                     .icon {
                                        width: 1em;
                                        height: 1em;
                                        vertical-align: -0.15em;
                                        fill: currentColor;
                                        overflow: hidden;
                                    }
                                }
                                

                            }
                           
                        }
                    }
                    .botom{
                        width: 100%;
                        // height: 60%;
                        padding-left: 70px;
                        box-sizing: border-box;
                        overflow: hidden;
                        padding-bottom: 10px;

                        // border-bottom: 1px solid beige;
                        p{
                            font-size: 14px;
                        }
                    }
                }
            }
        }
    }
    .inputbout{
        // display: ;
         position: fixed;
         width: 100%;
         height: 60px;
         bottom: -17px;
        //  border: 1px solid red;
        //  padding: 10px;
         box-sizing: border-box;
         border-radius: 10px;
         left: 0;
         .van-field{
             width: 100%;
             padding: 4px;
             border: 1px solid #ccc;
             input{
                 background: #fafafa;
                 height: 30px;
             }
         }
         .van-button{
             background-color: #8d8c8c;
             border: 0px;
         }
        //  background-color: rgb(76, 21, 185);
    }
}



</style>